let $username = $('#username'),
    $password = $('#password'),
    $repeatedPassword = $('#repeatedPassword'),
    $isUsername = $('#isUsername'),
    $isPwd = $('#isPwd'),
    $isRePwd = $('#isRePwd'),
    $isVerify = $('#isVerify');

function checkUsername(username){
    if(username === null || username === '' || username.length === 0){
        $isUsername.text('The username cannot be empty.').css("color","red").css("font-size", "15px");
        return;
    }
    if(username.length < 3 || username.length > 15){
        $isUsername.text('The length should be between 3 and 15.').css("color","red").css("font-size", "15px");
        return;
    }

    $.ajax({
        type    :   'GET',
        url     :   'http://localhost:8080/mypetstore/checkUsername?username=' + username,
        success :   function (data){
            if(data.valid){
                $isUsername.text('The username is valid.').css('color','green').css("font-size", "15px");
            }else {
                $isUsername.text('The username already exists.').css('color','red').css("font-size", "15px");
            }
        },
        error   :   function (errorMsg){
            console.log(errorMsg);
        }
    })
}

function checkPassword(password,repeatedPassword) {
    if(password === repeatedPassword){
        $isPwd.text('');
        $isRePwd.text('');
    }else {
        $isRePwd.text('The password entered twice do not match.').css("color","red").css("font-size", "15px");
    }
}

$username.on('blur',function (){
    let username = $(this).val().trim();
    checkUsername(username);
})

$repeatedPassword.on('blur',function (){
    let password = $password.val();
    if(password === null || password === '' || password.length === 0){
        $isPwd.text('The password cannot be empty.').css("color","red").css("font-size", "15px");
    }else {
        let repeatedPassword = $(this).val();
        checkPassword(password,repeatedPassword);
    }
})

$(document).on('submit', '#newAccountForm',function (e) {
    e.preventDefault();
    $isPwd.text('');
    $isRePwd.text('');
    $isVerify.text('');
    $.ajax({
        type    :   'POST',
        url     :   'http://localhost:8080/mypetstore/newAccount',
        data    :   $('#newAccountForm').serialize(),
        success :   function (data){
            if(data.valid) {
                window.location.href = 'http://localhost:8080/mypetstore/mainForm';
                alert('Registration is successful, now you can start shopping for your pet products!');
            }else {
                if(data.usernameEmpty) {
                    $isUsername.text('The username cannot be empty.').css("color","red").css("font-size", "15px");
                } else if(data.passwordEmpty) {
                    $isPwd.text('The password cannot be empty.').css("color","red").css("font-size", "15px");
                } else if(!data.passwordEquals) {
                    $isRePwd.text('The password entered twice do not match.').css("color","red").css("font-size", "15px");
                } else if(data.verifyEmpty) {
                    $isVerify.text('The verification code cannot be empty.').css("color","red").css("font-size", "15px");
                } else if(!data.verifyEquals) {
                    $isVerify.text('Your verification code is incorrect.').css("color","red").css("font-size", "15px");
                }
            }
        },
        error   :   function (errorMsg){
            console.log(errorMsg);
        }
    })
});

$(document).on('submit', '#saveAccountForm',function (e) {
    e.preventDefault();
    $isRePwd.text('');
    $.ajax({
        type    :   'POST',
        url     :   'http://localhost:8080/mypetstore/saveAccount',
        data    :   $('#saveAccountForm').serialize(),
        success :   function (data){
            if(data.passwordEquals) {
                alert('Save successfully!');
            }else {
                $isRePwd.text('The password entered twice do not match.').css("color","red").css("font-size", "15px");
            }
        },
        error   :   function (errorMsg){
            console.log(errorMsg);
        }
    })
});
